<template>
  <div class="virtual-tree-node cursor-p" :class="{
    'virtual-tree-node--active': node.isCurrent,
    'virtual-tree-node--disabled': node.disabled,
    'virtual-tree-node__leaf': !node.isFolder,
    'virtual-tree-node__more': node.isLoadMore
  }" :draggable="isDraggable" @dragstart="handleDragStart">
    <div class="virtual-tree-node__wrapper" :style="{ 'padding-left': `${8 + indent * node.level}px` }" @click="clickNode">
      <!-- 如果不显示展开 icon 的话，不需要销毁，需要 icon 占位 -->
      <i v-if="showFolderIcon" class="iconfont virtual-tree-node__expand-icon margin-right--mini"
        :class="[node.expanded ? expandIcon : noExpandIcon, showFolderIcon ? '' : 'hide-expand-icon']" />
      <el-checkbox v-if="showCheckbox && !node.isLoadMore" v-model="node.isCheck" :disabled="node.disabledCheckbox"
        :indeterminate="node.isIndeterminate" @change="checkAll" />
      <i v-if="node.loading" class="iconfont icon-snapshot-loading icon-spin" />
      <node-content class="text-clip virtual-tree-node__content" :title="showTooltip ? node.label : ''" :node="node" />
      <i v-if="showSelectIcon && node.isCurrent && !showCheckbox" class="iconfont icon-ok" />
    </div>
  </div>
</template>
<script lang="tsx">
import { Vue, Component, Prop } from 'vue-property-decorator';
// eslint-disable-next-line no-unused-vars
import TreeNode from './node';

@Component({
  components: {
    nodeContent: {
      props: {
        node: {
          required: true,
        },
      },
      render(h) {
        const parent = this.$parent;
        return (
          parent.renderContent
            // eslint-disable-next-line no-useless-call
            ? parent.renderContent.call(parent, h, { node: this.node, data: this.node.data })
            : <span class="virtual-tree-node__label">{this.node.label}</span>
        );
      },
    },
  },
})
export default class VirtualTreeNode extends Vue {
  @Prop({ type: Object, required: true }) node: TreeNode
  @Prop({ type: Number, default: 16 }) indent: number
  @Prop({ type: Boolean, default: false }) showCheckbox: boolean
  @Prop({ type: Boolean, default: false }) showFolderIcon: boolean
  @Prop({ type: Boolean, default: true }) showSelectIcon: boolean
  @Prop({ type: Function }) renderContent: Function
  @Prop({ type: String, default: null }) folderExpandIcon: string
  @Prop({ type: String, default: null }) folderNoExpandIcon: string
  @Prop({ type: Function }) draggable: Function
  @Prop({ type: Boolean, default: true }) showTooltip: boolean // 鼠标hover节点展示title

  get expandIcon() {
    return this.folderExpandIcon || 'icon-caret-down';
  }

  get noExpandIcon() {
    return this.folderNoExpandIcon || 'icon-caret-right';
  }

  get isDraggable() {
    let rel = false;
    if (typeof this.draggable === 'function') {
      rel = this.draggable(this.node, this.node.data);
    }
    return rel;
  }

  // methods
  clickNode(ev) {
    if (this.node.disabled || ev.target === this.$el.querySelector('.el-checkbox__inner') ||
      ev.target === this.$el.querySelector('.el-checkbox__original')) {
      return;
    }
    const expandIconDom = this.$el.querySelector('.virtual-tree-node__expand-icon');
    const isExpandIconClick = ev.target === expandIconDom;
    this.$emit('clickNode', this.node.data, this.node, isExpandIconClick);
  }

  checkAll() {
    if (!this.showCheckbox) {
      return;
    }

    this.$emit('checkNode', this.node.data, this.node);
  }

  handleDragStart(e) {
    // firefox需要加上这段代码才能拖拽
    e.dataTransfer.setData('text/plain', 'test');
    this.$emit('node-dragstart', { node: this.node, data: this.node.data });
  }
}
</script>
<style lang="scss">
@import "~assets/css/virtualTree.scss";
</style>
